<template>
  <div class="content-container" style="position: relative;">
    <div class="panel">
     <div class="menu-bar">
       <div class="menu" :style="{backgroundColor:newsType.value==item.value?'rgba(0,41,109,0.8)':'rgba(0,41,109,0.3)'} " @click="clickM(item)" v-for="(item,index) in newsTypeList" :key="index" >
         <div class="title">{{item.name}}</div></div>
     </div>
      <div class="content-list">
         <div class="content-item" @click="$router.push({path:'/policy-detail',query:{xwxh00:item.xwxh00}})" :key="index" v-for="(item,index) in newsData">
           <img class="brace-left" src="@/assets/zb.png"/>
           <div class="title">
             <div class="title-desc">{{item.zcbt00}}</div>
             <div class="title-date">{{item.zcsjsj.substring(0,10)}}</div>
           </div>
           <img class="brace-right" src="@/assets/yb.png"/>
         </div>
        <empty-data-panel v-if="policyData.length==0" msg="暂未发布相关信息"></empty-data-panel>
      </div>


    </div>

  </div>
</template>
<script>


import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {policyApi} from "@/api";

export default {
  name:"news",
  components:{
    ReturnBtn
  },
  data(){
    //0-其他 1-党建要闻 2-新闻发布 3-信息公开
    return {
      newsTypeList: [
        {
          name: "新闻发布",
          value: "2",
          icon: "employ"
        },
          {
        name: "党建要闻",
        value: "1",
        icon: "linggong"
      },{
        name: "信息公开",
        value: "3",
        icon: "business"
      },{
        name: "其他",
        value: "0",
        icon: "train"
      }],
      queryPolicyParam:{
        page:1,
        limit:10
      },
      queryNewsParam:{
        page:1,
        limit:10
      },
      newsData:[
      ],
      newsType:   {
        name: "就业政策",
        value: "2",
        icon: "employ"
      },
    }
  },
  created() {
    this.queryNews()
  },
  methods:{
    clickM(item){
      this.newsType=item
      this.queryNews()
    },
    queryNews(){
      this.policyData=[]
      policyApi.queryNews({xwlx00:this.newsType.value,page:this.queryNewsParam.page,limit: this.queryNewsParam.limit}).then((res) => {
        this.newsData = res.data.records
      }).catch(()=>{

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel{

  width: 100%;
  height: 100%;

   .menu-bar{
     display: flex;
     margin-top: 20px;
     height: 64px;
     .menu{
       cursor: pointer;
       margin-left: 110px;
       width: 243px;
       height: 63px;
       line-height: 20px;
       border-radius: 16px;
       background-color: rgba(0,41,109,0.3);
       color: rgba(16,16,16,1);
       font-size: 14px;
       text-align: center;
       font-family: Roboto;
       border: 1px solid rgba(187,187,187,1);
       .title{
         margin-top: 20px;
         font-size: 30px;
         color: white;
       }

     }
   }
  .content-list{
    min-height: 600px;
    width: 1800px;
    margin: 30px auto 2px auto;
    border-radius: 12px;
    background-color: rgba(0,41,103,0.5);
    border: 1px solid rgba(187,187,187,1);
    .content-item{
      cursor: pointer;
      height: 50px;
        width: 1600px;
        margin: 20px auto auto auto;
        background-color: rgba(2,51,118,0.8);
        display: flex;
        .brace-left{
          width: 20px;
          height: 54px;
          margin-top: -2px;
          margin-left: -3px;
        }
        .title{
          flex: 1;
          height: 100%;
          display: flex;
          .title-desc{
            padding-left: 30px;
            font-size: 26px;
            line-height: 50px;
            height: 100%;
            color: white;
            flex: 1;
            text-align: left;
          }
          .title-date{
            line-height: 50px;
            font-size: 24px;
             width: 200px;
              height: 100%;
              color: white;
          }
        }
        .brace-right{
          width: 20px;
          height: 54px;
          margin-top: -2px;
          margin-right: -3px;
        }

    }
  }
}
</style>
